<template>
  <div class="online padbottom">
    <van-checkbox-group v-model="result">
      <div v-for="item in onlineData" :key="item.id" class="module">
        <van-cell-group>
          <van-cell
            v-if="currentNode == 'T10355' || currentNode == 'T10107'"
            class="choose"
          >
            <van-checkbox
              shape="square"
              icon-size="14px"
              checked-color="#009966"
              :name="item.id"
            ></van-checkbox>
          </van-cell>
          <van-field
            v-model="item.involve_system_name"
            label="涉及系统"
            input-align="right"
            label-class="labelColor"
            placeholder="系统名称只读"
            readonly
          />
          <van-field
            v-model="item.responsible_person_name"
            label="负责人"
            input-align="right"
            label-class="labelColor"
            placeholder="负责人名只读"
            readonly
          />
          <van-cell center title="是否上线">
            <template #right-icon>
              <van-switch
                v-model="item.is_online"
                size="24"
                :disabled="!isReadyNode"
                @change="saveData"
              />
            </template>
          </van-cell>
          <van-field
            v-if="isReadyNode"
            v-model="item.online_date"
            is-link
            label-class="labelColor"
            readonly
            label-width="4em"
            arrow-direction="down"
            label="上线时间"
            @click="getDate(1)"
            input-align="right"
            placeholder="请选择"
          />
          <van-field
            v-else
            v-model="item.online_date"
            label="上线时间"
            label-width="4em"
            input-align="right"
            label-class="labelColor"
            placeholder="上线时间"
            readonly
          />
        </van-cell-group>
      </div>
    </van-checkbox-group>
    <van-calendar
      v-model="show"
      :show-confirm="false"
      color="#009966"
      @confirm="onConfirm"
    />
    <div v-if="isCurrentNode" class="form-btn">
      <div class="btn btn-color1" @click="handleMoreOpera">更多操作</div>
      <!-- <div class="btn btn-color2">保存</div> -->
      <div class="btn btn-color3" @click="submit">提交</div>
    </div>
    <van-action-sheet
      v-model="showMoreOpera"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @cancel="onCancel"
    />
  </div>
</template>
<script>
import { serviceOnline, serviceOnlineSubmit } from "@/api/service.js";
import { Toast } from "vant";
export default {
  props: ["id", "currentNode"], //服务单id
  data() {
    return {
      text: "13123123",
      date: "",
      show: false,
      isswitch: false,
      actions: [{ name: "OA流程" }, { name: "审批记录" }],
      showMoreOpera: false,
      onlineData: {},
      isCurrentNode: true, //是否在该节点下进行
      isReadyNode: true, //是否是准备上线节点
      result: [],
    };
  },
  mounted() {
    if (this.id) {
      this.getOnlineData();
      this.checkNode();
    }
  },
  methods: {
    handleMoreOpera() {
      this.showMoreOpera = true;
    },
    onCancel() {
      this.showMoreOpera = false;
    },
    //检查是否是当前节点
    checkNode() {
      console.log(this.currentNode);
      if (
        this.currentNode == "T10104" ||
        this.currentNode == "T10355" ||
        this.currentNode == "T10107" ||
        this.currentNode == "T10275"
      ) {
        this.isCurrentNode = true;
      } else {
        this.isCurrentNode = false;
      }

      if (this.currentNode == "T10104") {
        this.isReadyNode = true;
      } else {
        this.isReadyNode = false;
      }
    },
    getOnlineData() {
      serviceOnline({
        server_id: this.id,
        node_id: this.currentNode,
      }).then((res) => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            this.onlineData = res.data;
          } else {
            this.onlineData = [
              {
                involve_system_name: "",
                responsible_person_name: "",
                is_online: false,
                online_date: "",
              },
            ];
          }
        }
      });
    },
    submit() {
      // Toast("提交");
      if (this.currentNode == "T10104") {
        serviceOnlineSubmit({
          server_online_id: this.onlineData[0].id,
          is_online: this.onlineData[0].is_online ? 1 : 0,
          online_date: this.onlineData[0].online_date,
          node_id: this.currentNode,
        }).then((res) => {
          if (res.code == 200) {
            this.$router.push({
              path: "/service/node-flow",
              query: {
                id: this.id,
                showUser: false,
                source: this.currentNode,
              },
            });
          } else {
            Toast(res.message);
          }
        });
      } else if (this.currentNode == "T10355" || this.currentNode == "T10107") {
        this.$router.push({
          path: "/service/node-flow",
          query: {
            id: this.id,
            showUser: false,
            source: this.currentNode,
            idgroup: this.result,
          },
        });
      } else {
        this.$router.push({
          path: "/service/node-flow",
          query: {
            id: this.id,
            showUser: false,
            source: this.currentNode,
          },
        });
      }
    },
    onSelect(active, index) {
      console.log(active, index);
      if (active.name == "审批记录") {
        this.$router.push({
          path: "/service/approvalRecord",
          query: {
            id: this.id,
          },
        });
      } else if (active.name == "OA流程") {
        this.$router.push({
          path: "/service/oaFlow",
          query: {
            id: this.id,
          },
        });
      }
    },
    saveData() {},
    //获取时间
    getDate() {
      this.show = true;
    },
    onConfirm(value) {
      console.log(value);
      this.onlineData[0].online_date = this.formatDate(value);
      this.show = false;
    },
    formatDate(date) {
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      return `${date.getFullYear()}-${month}-${day}`;
    },
  },
};
</script>

<style lang="less" scoped>
.online.padbottom {
  padding-bottom: 100px;
}
.module {
  margin-top: 12px;
}
/deep/.labelColor {
  color: rgba(49, 53, 65, 0.6);
}
/deep/.van-cell__title {
  color: rgba(49, 53, 65, 0.6);
}
/deep/.van-field__control {
  color: #313541;
}
.form-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: #fff;
  height: 34px;
  padding: 13px 15px;
  padding-bottom: calc(13px + env(safe-area-inset-bottom));
  .btn {
    flex: 1;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
    margin-right: 6px;
    border-radius: 5px;
    &:last-child {
      margin-right: 0;
    }
  }
  .btn-color1 {
    background: rgba(147, 157, 173, 0.18);
    color: #313541;
  }
  .btn-color3 {
    background: #009966;
    color: #fff;
  }
}
</style>